<template>
	<div>
		<search-form class="search-box content-fade-upper" @reset="reset" @query-data="onQueryData">
			<template #default>
				<layer-tools ref="layerToolsRef" default-views="道路基础" @box-selection="boxSelection" />
			</template>
		</search-form>

		<map-type-control class="fixed right-30px bottom-30px z-100" :rlt="false" :rltPage="'basic'" :level="true"
			@isZoom="getIsZoom" />

		<select-common ref="selectRefs" v-model:expanded="selectCommonExpanded" v-model:expanded1="selcList"
			@getParam="getParam" @getMapRoadListByIds="getMapRoadListByIds"></select-common>
		<rightInfo></rightInfo>

	</div>
</template>
<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		onMounted,
		onBeforeUnmount,
		watch,
		nextTick,
	} from 'vue';
	import selectCommon from './components/selectCommon.vue';
	import rightInfo from './components/rightInfo.vue';
	import SearchForm from './components/SearchForm.vue';
	import {
		useMapStore
	} from '@/store/modules/map';
	import layerTools from '@/components/layerTools/index.vue';
	import {
		getQuery,
		queryRoadPage,
		queryRoadByLevel,
		getRoadBasicByIds
	} from '@/api/basic';
	import {
		polylineColor
	} from '@/utils/polyLineColor';
	import MapTypeControl from '@/components/MapTypeControl/index.vue';
	import {
		useLargeLine
	} from '@/hooks/map/useLargeLine';
	import {
		debounce
	} from '@/utils/index.ts'
	import {
		addmarker,
		maketList
	} from '@/layout/tabs/maps/setPoint.js';

	import emitter from '@/utils/emitter';

	export default defineComponent({
		name: 'BasicIndex',
		components: {
			selectCommon,
			rightInfo,
			layerTools,
			MapTypeControl,
			SearchForm,
		},
		setup() {
			const mapStore = useMapStore();

			const state = reactive({
				map: computed(() => mapStore.ownMap),

				loading: false,
				selectRefs: null,
				layerToolsRef: null,
				polylineColor,
				selectCommonExpanded: false,
				selcList: false,
				isZoom: false,
				listParams: "",
				icon: require("@/assets/images/basic/hospital_icon.png"),
				markerList: [],
				menu: [],
			});

			nextTick(() => {
				state.map.addEventListener('zoomend', function() {
					let levelNum = state.map.getZoom()
					if ([12, 13, 14].includes(levelNum) && state.isZoom) {
						queryRoadDadaByLevel(levelNum, state.isZoom)
					}
					//地图缩放结束后执行的代码
				});

			});



			const {
				darwLargeLine,
				clearLargeLine
			} = useLargeLine();

			emitter.on("currentRoad", (item) => {
				if (!item) {
					clearLargeLine(true);
					return
				}
				clearLargeLine(true);

				queryRoadPage({
					roadLevel: item.lev > 4 ? '' : item.type, // 道路等级，例： 主干路
					finished: item.lev == 10 ? '1' : item.lev == 11 ? '2,5' :
					'', //建设状态;0:按规划形成;1:未建;2:规划与建设不一致;5:规划外;3:在建;
					pageSize: 100000,
					pageNum: 1,
				}).then((resRoad) => {
					// console.log("resRoad===>", resRoad);
					if (!resRoad?.length) {
						return;
					}
					let isDashedRoad = [10, 11].includes(item.lev) ? true : false
					darwLargeLine(resRoad, 13, false, state.isZoom, isDashedRoad);
				})
			})
			//道路基础信息弹窗显示时，隐藏当前区域弹窗
			emitter.on("ctlPopUp", (status) => {
				state.selectCommonExpanded = false;
			})

			// 这个功能去掉了
			const boxSelection = (data) => {
				state.selectRefs.listArea = [];
				state.selectRefs.listRoad = [];
				const arr = data.filter((e) => e.street != '');
				const newArr = [];
				const obj = {};
				for (let i = 0; i < arr.length; i++) {
					if (!obj[arr[i].street]) {
						arr[i].roadName = arr[i].street;
						newArr.push(arr[i]);
						obj[arr[i].street] = true;
					}
				}
				state.selectRefs.radioListSearh = [];
				state.selectRefs.radioList = newArr;
				state.selectRefs.radio = newArr[0].street;
				state.selectCommonExpanded = true;
				mapStore.setShowPolyline(true);

				// getQuery({ roadItem: newArr[0].street }).then((res) => {
				//   state.selectRefs.listArea = res;
				//   if (res.length) {
				//     darwLargeLine(res);
				//   }
				// });

				// queryRoadPage({
				//   ...params,
				//   pageSize:100000,
				//   pageNum:1,
				// }).then(resRd=>{

				// })
			};
			// 根据地图缩放等级查询道路信息
			const queryRoadDadaByLevel = (level, isZoom) => {
				console.log('zoom', level, isZoom)
				queryRoadByLevel({
					level
				}).then(resRoad => {
					if (!resRoad?.length) {
						return;
					}
					darwLargeLine(resRoad, level, isZoom);
					// state.selectRefs.listRoad = null; //resRoad[0] || null;//只展示一个道路基础指标即可 (不选择道路时 不显示道路基础指标)
					// const arr = resRoad.filter((e) => e.roadName != '');
					// state.selectRefs.radioListSearh = arr;
					// state.selectRefs.radioList = [];
					// state.selectRefs.radio = ''; //arr[0].roadName;//修改不给区域道路默认值
					// state.selectCommonExpanded = true;
				})
			}

			const getMapRoadListByIds = (val) => {
				getRoadBasicByIds({
					ids: val.join()
				}).then((resRoad) => {
					// console.log("resRoad===>",resRoad);
					if (!resRoad?.length) {
						clearLargeLine()
						return;
					}
					darwLargeLine(resRoad);

					state.selectRefs.listRoad =
						null; //resRoad[0] || null;//只展示一个道路基础指标即可 (不选择道路时 不显示道路基础指标)
					const arr = resRoad.filter((e) => e.roadName != '');

					// state.selectRefs.radioListSearh = arr ;
					state.selectRefs.radioList = [];
					state.selectRefs.radio = ''; //arr[0].roadName;//修改不给区域道路默认值
					state.selectCommonExpanded = true;
				});
			}

			const getParam = (val) => {
				// console.log("----val---",val);

				state.selectRefs.radioListSearh = [];
				debounce(onQueryData({
					...state.listParams,
					roadNameKey: val
				}), 500)
				// onQueryData({...state.listParams,roadNameKey:val})
			}

			const onQueryData = (dataAndParams) => {
				// console.log("data---->",dataAndParams);
				// console.log("点击查询");
				// 点击查询的时候 把路网基础信息弹窗去掉
				emitter.emit("ctlBasePopUp", false)

				state.listParams = dataAndParams
				const {
					data,
					params,
					params2,
					roadNameKey
				} = dataAndParams;
				//2023-06-14接口数据做了更改判断无数据的方式做调整 之前是数组 现在是json对象
				// 无数据情况
				if (!Object.keys(data).length) {
					clearLargeLine();
					state.selectRefs.listArea = [];
					state.selectRefs.radioListSearh = [];
					state.selectRefs.radioList = [];
					state.selectRefs.radio = '';
					state.selectCommonExpanded = false;
					return;
				}
				state.selectRefs.listArea = [data];
				state.selectRefs.params2 = params2;

				//同上 接口做了调整 新接口如下
				queryRoadPage({
					...params,
					roadNameKey,
					pageSize: 100000,
					pageNum: 1,
				}).then((resRoad) => {
					// console.log("resRoad2===>", resRoad);
					if (!resRoad?.length) {
						return;
					}
					darwLargeLine(resRoad, 13, false, true);

					state.selectRefs.listRoad =
						null; //resRoad[0] || null;//只展示一个道路基础指标即可 (不选择道路时 不显示道路基础指标)
					const arr = resRoad.filter((e) => e.roadName != '');

					// state.selectRefs.radioListSearh = arr ;
					state.selectRefs.radioList = [];
					state.selectRefs.radio = ''; //arr[0].roadName;//修改不给区域道路默认值
					state.selectCommonExpanded = true;
				});

				////原接口如下
				// getQuery({ roadItem: arr[0].roadName })
				//   .then((res) => {
				//     console.log("res===",res);
				//     state.selectRefs.list = res;
				//   })
				//   .catch((e) => {
				//     console.log('e :>> ', e);
				//   });
			};
			const getIsZoom = (st) => {
				console.log("isZoom", st);
				state.isZoom = st
			}
			const reset = () => {
				state.layerToolsRef.multipleRoadRef.isRoad = false;

				state.map?.clearOverlays();

				state.selectRefs.list = [];
				state.selectRefs.radioListSearh = [];
				state.selectRefs.radioList = [];
				mapStore.setSlcList(false)
				// 关闭左侧选择区域面板
				state.selectCommonExpanded = false;
				// 清除绘制的线路
				clearLargeLine();
				// 关闭道路等级面板
				mapStore.setShowPolyline(false);
			};

			// 全景
			// watch(
			//   () => state.map,
			//   () => {
			//     if (state.map) {
			//       state.map.addTileLayer(new BMap.PanoramaCoverageLayer());
			//       const stCtrl = new BMap.PanoramaControl(); //构造全景控件
			//       stCtrl.setOffset(new BMap.Size(30, 5));
			//       state.map.addControl(stCtrl); //添加全景控件
			//     }
			//   },
			// );
			// 添加maker
			// const makerList = (map, e) => {
			//   state.map.clearOverlays();

			//   let mkIcon = addmarker(map, { ...e.point, type: e.type })



			//   state.map.addOverlay(mkIcon)


			// };




			onMounted(() => {
				// mapStore.setLayerView('道路基础');
				// nextTick(() => {
				//   setMarkerMenu()
				// })
			});
			onBeforeUnmount(() => {
				mapStore.setShowPolyline(false);
			});


			return {
				...toRefs(state),
				boxSelection,
				reset,
				onQueryData,
				getParam,
				getIsZoom,
				getMapRoadListByIds,
			};
		},
	});
</script>
<style lang="less" scoped>
	::v-deep .el-input__inner {
		color: #fff;
	}

	.search-box {
		position: absolute;
		top: 1%;
		left: 0;
		// right: 100px;
		width: 800px;
		z-index: 4;
		margin-bottom: 10px;
		padding: 0 30px;
		// padding-right: 0;
		display: flex;
		align-items: center;
	}

	:deep(.el-input__wrapper) {
		background-color: #ffffff00;
		box-shadow: 0px 0px 0px;
		color: white;
		// height: 2.5vw;
		// line-height: 2.5vw;
	}

	:deep .el-select {
		--el-select-border-color-hover: none;
		--el-select-input-focus-border-color: none;
	}

	.el-range-separator {
		color: #ffffffff;
	}

	:deep(.ant-select-item-option-selected) {
		&:not(.ant-select-item-option-disabled) {
			background-color: #ffffff00 !important;
		}
	}
</style>